<template>
    <div class="product-list">
        <div class="clearfix text-r border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" icon="plus" class="pull-left mt-5" @click="addPms({},0)"></a-button>
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="tableReload"></a-button>
            <!--            <a-button size="small" type="primary" icon="vxe-icon&#45;&#45;menu">-->
            <!--                <i style="margin-top: -1px" class="vxe-icon&#45;&#45;menu"></i>-->
            <!--            </a-button>-->
        </div>
        <div class="search-form border-b-eded pl-20 pr-20">
            <a-form layout="inline" size="small">
                <a-form-item label="关键字">
                    <a-input class="width-200" placeholder="请输入关键字" v-model="params.keywords" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" :loading="loadingSearch" @click="search">查询</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div>
            <p-remote-vxe-table
                    ref="remoteTable"
                    :data-fun="dataFun"
                    @afterLoad="afterLoad"
                    @afterLoadErr="afterLoadErr"
                    :params="params">
                <template slot-scope="{tablePage, data, loading, handlePageChange, sortChangeEvent}" :params="params">
                    <vxe-grid
                            border
                            resizable
                            auto-resize
                            sync-resize
                            size="mini"
                            :height="tableHeight"
                            :loading="loading"
                            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                            :pager-config="tablePage"
                            :columns="columns"
                            :sortConfig="{
                                remote: true,
                                trigger: 'cell',
                            }"
                            highlight-hover-row
                            highlight-current-row
                            highlight-hover-column
                            highlight-current-column
                            @sort-change="sortChangeEvent"
                            @page-change="handlePageChange"
                            :data="data">
                        <template v-slot:action="{ row, column }">
                            <div class="clearfix text-c">
                                <a-button size="small" type="primary" icon="edit" class="pull-left mb-10 mr-10" @click="addPms(row,1)"></a-button>
                                <a-button size="small" type="danger" icon="delete" class="pull-left" @click="delPms(row)"></a-button>
                            </div>
                        </template>
                    </vxe-grid>
                </template>
            </p-remote-vxe-table>
        </div>
        <add-pms ref="addPms" @done="tableReload"></add-pms>
    </div>
</template>

<script>
    let defaultColumns = [
        // 对应自定义插槽的名称
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '分类名称', minWidth: 120, align: 'center', field: 'categoryName' },
        { title: '产品名称', minWidth: 120, align: 'center', field: 'productName' },
        { title: '产品编码', minWidth: 120, align: 'center', field: 'productCode' },
        { title: '创建人', minWidth: 100, align: 'center', field: 'createdBy' },
        { title: '创建时间', minWidth: 100, align: 'center', field: 'createdTime' },
        { title: '操作', minWidth: 120, align: 'left', fixed: 'right', resizable: false, noColumnsSet: true, slots: { default: 'action'},},
    ];
    import addPms from './add';
    export default {
        components: {
            addPms,
        },
        data () {
            return {
                dataFun: this.$api.product.listbyproduct,
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                    groupName: '',
                    categoryId: undefined,
                },
                columns: JSON.parse(JSON.stringify(defaultColumns)),
                loadingSearch: false,
                categoryList: [],
            };
        },
        methods: {
            afterLoad () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            afterLoadErr () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            search () {
                this.loadingSearch = true;
                this.params.pageNum = 1;
                this.tableReload();
            },
            tableReload () {
                this.$refs['remoteTable'].reload(this.params);
            },
            addPms (data,num) {
                let title = num === 0 ? '新增产品' : '编辑产品';
                this.$refs.addPms.show(data,title,num);
            },
            //删除产品
            delPms (data) {
                let _this = this;
                _this.$confirm({
                    title: '产品删除',
                    content: '是否确定删除该产品',
                    okText: '是',
                    okType: 'danger',
                    cancelText: '否',
                    onOk() {
                        _this.delPmsApi({categoryId: data.id});
                    },
                });
            },
            delPmsApi (data) {
                this.$api.product.deletecategory(data).then(res => {
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.$message.success('删除成功');
                    this.tableReload();
                }).catch(err => {
                    this.$message.error(err.errorMsg);
                });
            },
        }
    };
</script>

<style scoped lang="scss">

</style>
